<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="common/header::head"></div>
</head>
<body>
<div th:replace="common/header::headerhtml"></div>
<div class="layui-container fly-marginTop">
    <div class="fly-panel fly-panel-user" pad20>
        <div class="layui-tab layui-tab-brief" lay-filter="user">
            <ul class="layui-tab-title">
                <li><a href="/page/login/">登入</a></li>
                <li class="layui-this">注册</li>
            </ul>
            <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form layui-form-pane">
                        <form method="post" lay-filter="example">
                            <div class="layui-form-item">
                                <label for="L_email" class="layui-form-label">账号</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="L_account" name="account" required
                                           lay-verify="required" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <!--<div class="layui-form-item"><label for="L_vercode" class="layui-form-label">验证码</label>
                                <div class="layui-input-inline"><input type="text" id="L_vercode" name="vercode"
                                                                       required lay-verify="required"
                                                                       placeholder="请输入手机短信验证码" autocomplete="off"
                                                                       class="layui-input"></div>
                                <div class="layui-form-mid" style="padding: 0!important;">
                                    <button type="button" class="layui-btn layui-btn-normal" id="FLY-getvercode">获取验证码
                                    </button>
                                </div>
                            </div>-->
                            <div class="layui-form-item">
                                <!--<input type="hidden" name="secret"
                                       value="%E9%98%B2%E6%AD%A2%E5%B9%BF%E5%91%8A%E7%8B%97682317">-->
                                <label for="L_username" class="layui-form-label">昵称</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="L_username" name="nickName"
                                           required lay-verify="required" autocomplete="off"
                                           class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">你在社区的名字</div>
                            </div>
                            <!-- <div class="layui-form-item">
                                 <label for="L_username" class="layui-form-label">真实姓名</label>
                                 <div class="layui-input-inline">
                                     <input type="text" id="L_realname" name="realName"
                                            required lay-verify="required" autocomplete="off"
                                            class="layui-input">
                                 </div>
                                 <div class="layui-form-mid layui-word-aux">填写真实姓名有助于加入组</div>
                             </div>-->
                            <div class="layui-form-item">
                                <label for="L_phone" class="layui-form-label">手机号码</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="L_phone" name="phone"
                                           required lay-verify="required" autocomplete="off"
                                           class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">用与微信/QQ登录</div>
                            </div>
                            <div class="layui-form-item">
                                <label for="L_pass" class="layui-form-label">密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" id="L_pass" name="pass"
                                           required
                                           lay-verify="required" autocomplete="off"
                                           class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">6到16个字符</div>
                            </div>
                            <div class="layui-form-item">
                                <label for="L_repass" class="layui-form-label">确认密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" id="L_repass" name="repassword"
                                           required lay-verify="required" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label for="L_vercode" class="layui-form-label">图形码</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="L_imagecode" name="code"
                                           required lay-verify="required" autocomplete="off"
                                           class="layui-input"/>
                                </div>
                                <div class="layui-form-mid" style="padding: 0!important;"><img
                                        src="/comm/code?t=0" class="fly-imagecode"
                                        onclick="this.src = '/comm/code?t='+Math.random()"/>
                                </div>
                            </div>
                            <div class="layui-form-item" style="position: relative; left: -10px; height: 32px;">
                                <input type="checkbox" name="agreement" lay-skin="primary" title="" checked> <a
                                    href="javascript:void(0)" target="_blank"
                                    style="position: relative; top: 4px; left: 5px; color: #999;">同意用户服务条款及隐私条款</a>
                            </div>
                            <div class="layui-form-item">
                                <button class="layui-btn" lay-filter="*" lay-submit>立即注册</button>
                            </div>
                            <!-- <div class="layui-form-item fly-form-app"><span>或者直接使用社交账号快捷注册</span> <a href="/app/qq"
                                                                                                      onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})"
                                                                                                      class="iconfont icon-qq"
                                                                                                      title="QQ登入"></a>
                                 <a href="/app/weibo/" onclick="layer.msg('正在通过微博登入', {icon:16, shade: 0.1, time:0})"
                                    class="iconfont icon-weibo" title="微博登入"></a></div>-->
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:replace="common/footer::footer"></div>
<script th:replace="common/footer::script"></script>
<script>
    layui.use("form", function () {
        var $ = layui.jquery,
            form = layui.form;
        form.on('submit(*)', function (res) {
            var data = res.field;
            if (data.pass !== data.repassword) {
                layer.alert("两次密码输入不一至");
                return false;
            }
            if (!data.agreement || data.agreement !== 'on') {
                layer.alert("请仔细阅读用户服务条款，并接受用户服务及隐私条款！");
                return false;
            }
            console.log(data);
            console.log(res);
            $.ajax({
                url: '/login/reg',
                type: 'post',
                dataType: 'json',
                data: data,
                success: function (result) {
                    if (result.status !== 200) {
                        layer.alert(result.msg, {icon: 5});
                        return;
                    }
                    layer.alert("注册成功，快去登陆吧！", {
                        icon: 6,
                        yes:function () {
                            //跳转
                            location.href = '/page/login';
                        }
                    })

                }
            });
            return false;
        });
        var active = {
            loadCord: function () {
                console.log("重新加载图片")
            }
        }
        $('.layui-body .layui-btn').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
    })
</script>
</body>
</html>